<template>

  <div class="product">
    <!--添加菜单&权限-->
    <div class="common-level-rail d-b-c">
      <el-button  type="primary" @click="addClick" icon="Plus">添加菜單&權限</el-button>
      <el-form :inline="true" :model="formSearch" >
        <el-form-item>
          <el-checkbox v-model="formSearch.isMenu" @change="changeIsMenuFunc">只顯示菜單</el-checkbox>
          <el-checkbox v-model="formSearch.pack_up" @change="changePackUpFunc">收起</el-checkbox>
        </el-form-item>
      </el-form>
    </div>
    <!--内容-->
    <div class="product-content">
      <div class="table-wrap">
        <div>
          <el-table
            size="small"
            :data="tableData"
            style="width: 100%;margin-bottom: 20px;"
            row-key="accessId"
            border
            default-expand-all
            ref="theTable"
            :tree-props="{ children: 'children' }"
            v-loading="loading"
          >
            <el-table-column prop="name" label="菜單名稱">
              <template #default="scope">
                <span v-if="scope.row.path=='/plus'" class="fb red f18">
                  {{scope.row.name}}
                </span>
                <span v-else>
                  {{scope.row.name}}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="path" label="路徑"></el-table-column>
            <el-table-column prop="isRoute" label="類別" width="90">
              <template #default="scope">
                <span v-if="scope.row.isRoute==1">頁面</span>
                <span v-if="scope.row.isRoute==0">按鈕</span>
                <span v-if="scope.row.isRoute==2">獨立單頁面</span>
              </template>
            </el-table-column>
            <el-table-column prop="isShow" label="是否顯示" width="80">
              <template #default="scope">
                <el-switch
                  v-model="scope.row.isShow"
                  :active-value="1"
                  :inactive-value="0"
                  @change="isShowFunc(scope.row)"
                  active-color="#13ce66"
                  inactive-color="#cccccc"
                ></el-switch>
              </template>
            </el-table-column>
            <el-table-column prop="sort" label="排序" width="60"></el-table-column>
            <el-table-column prop="createTime" label="添加時間" width="140"></el-table-column>
            <el-table-column prop="name" label="操作" width="230">
              <template #default="scope">
                <el-button @click="addClick(scope.row,'copy')" type="text" size="small" v-if="scope.row.path!='/plus'">一鍵複製</el-button>
                <el-button @click="addClick(scope.row,'child')" type="text" size="small">添加子菜單</el-button>
                <el-button @click="editClick(scope.row)" type="text" size="small">編輯</el-button>
                <el-button @click="deleteClick(scope.row)" type="text" size="small" v-if="scope.row.path!='/plus'">刪除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>

    <!--添加-->
    <Add v-if="open_add" :open_add="open_add" :add_type="add_type" :rawData="rawData" :selectModel="selectModel" @closeDialog="closeDialogFunc($event, 'add')"></Add>

    <!--编辑-->
    <Edit v-if="open_edit" :open_edit="open_edit" :rawData="rawData" :selectModel="selectModel" @closeDialog="closeDialogFunc($event, 'edit')"></Edit>

  </div>
</template>

<script>
import AccessApi from '@/api/access.js';
import Edit from './part/Edit.vue';
import Add from './part/Add.vue';
;
import { deepClone } from '@/utils/base.js';
export default {
  components: {
    /*编辑组件*/
    Edit: Edit,
    Add: Add
  },
  data() {
    return {
      /*是否正在加载*/
      loading: true,
      /*筛选搜索*/
      formSearch: {
        /*是否只显示菜单*/
        isMenu: false,
        /*是否收起*/
        pack_up: false
      },
      /*原始数据*/
      rawData: [],
      /*表格数据*/
      tableData: [],
      /*是否打开添加弹窗*/
      open_add: false,
      /*添加类型*/
      add_type: '',
      /*选中的对象*/
      selectModel: {},
      /*是否打开编辑弹窗*/
      open_edit: false,
      /*当前编辑的对象*/
      userModel: {}
    };
  },
  created() {
    /*获取列表*/
    this.getTableList();
  },
  methods: {
    /*列表是否只显示菜单*/
    changeIsMenuFunc(e) {
      let list = deepClone(this.rawData);
      if (e) {
        this.showScreen(list, 1);
        this.tableData = list;
      } else {
        this.tableData = list;
      }
    },
    /*是否显示开关*/
    isShowFunc(e) {
      let self = this;
      AccessApi.status({
        id: e.accessId,
        status: e.isShow
      }, true).then(data => {
        if (data.code == 1) {
          ElMessage({
            message: data.msg,
            type: 'success'
          });
          self.getTableList();
        }
      }).catch(error => {
        self.loading = false;
      });
    },
    /*是否收起*/
    changePackUpFunc(e) {
      this.forArr(this.tableData, !e);
    },
    /*列表收起*/
    forArr(arr, isExpand) {
      arr.forEach(i => {
        this.$refs.theTable.toggleRowExpansion(i, isExpand);
        if (i.children) {
          this.forArr(i.children, isExpand);
        }
      });
    },
    /*切换显示类别*/
    changeShowFunc(e) {
      let list = deepClone(this.rawData);
      if (e == 'all') {
        this.tableData = list;
      } else {
        let type;
        if (e == 'show') {
          type = 1;
        }
        if (e == 'hide') {
          type = 0;
        }
        this.showScreen(list, type);
        this.tableData = list;
      }
    },
    /*显示筛选*/
    showScreen(list, type) {
      for (let i = 0; i < list.length; i++) {
        let item = list[i];
        if (typeof item.isMenu != 'undefined' && item.isMenu != type) {
          list.splice(i, 1);
          i--;
        } else {
          if (item.children && item.children.length > 0) {
            this.showScreen(item.children, type);
          }
        }
      }
    },
    /*获取列表*/
    getTableList() {
      let self = this;
      let Params = {};
      AccessApi.accessList(Params, true).then(res => {
        self.loading = false;
        self.rawData = res.data;
        self.tableData = res.data;
      }).catch(error => {
        self.loading = false;
      });
    },
    /*打开添加*/
    addClick(e, type) {
      if (e && typeof e != 'undefined') {
        this.add_type = type;
        this.selectModel = deepClone(e);
      } else {
        this.parentsId = 0;
      }
      this.open_add = true;
    },
    /*打开编辑*/
    editClick(item) {
      this.selectModel = item;
      this.open_edit = true;
    },
    closeDialogFunc(e, f) {
      if (f == 'add') {
        this.open_add = e.openDialog;
        if (e.type == 'success') {
          this.getTableList();
        }
      }
      if (f == 'edit') {
        this.open_edit = e.openDialog;
        if (e.type == 'success') {
          this.getTableList();
        }
      }
    },
    /*删除用户*/
    deleteClick(row) {
      let self = this;
      ElMessageBox.confirm("刪除後不可恢復，確認刪除該記錄嗎?", "提示", {
        confirmButtonText: "確定",
        cancelButtonText: "取消",
        type: 'warning'
      }).then(() => {
        self.loading = true;
        AccessApi.delAccess({
          id: row.accessId
        }, true).then(data => {
          if (data.code == 1) {
            self.loading = false;
            ElMessage({
              message: data.msg,
              type: 'success'
            });
            self.getTableList();
          }
        }).catch(error => {
          self.loading = false;
        });
      }).catch(() => {});
    }
  }
};
</script>

